import { Layout, Row, Col } from "antd"
import {MenuFoldOutlined,MenuUnfoldOutlined,} from '@ant-design/icons';
import React,{FC} from "react"
import "./index.css"
import useStorage from "@/hooks/useStorage"
import { useNavigate } from "react-router-dom";
// 声明类型
type Iprops = {
    collapsed:boolean,
    changeCollapse:()=>void
}

let { Header } = Layout;

const HeaderBase:FC<Iprops> = (props) => {
    // 使用导航
    let navigate = useNavigate()
    // 控制收起的属性
    let {collapsed,changeCollapse} = props

    // 调用自定义hook的存储方法
    let [token,methods] = useStorage('qf-token')
    let [userInfo,method] = useStorage('qf-userInfo')
    // 退出登录的方法
    let outLogin = () => {
        // 调用hook中的移除方法
        methods.rm()
        method.rm()
        // 跳转到登录页面
        navigate('/login')

    }
    return (
        <Header style={{ padding: 0, }}>
            {/* 栅格布局 */}
          <Row justify="space-around">
            <Col span={6}>
                {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                    className: 'trigger',
                    onClick: changeCollapse,
                })}
            </Col>
            <Col className="systemName1" span={6}>
                erm商城后台
            </Col>
            <Col className="dropMenu" span={6}>
                <a href="#" onClick={outLogin}>退出登录</a>
            </Col>
          </Row>
        </Header>
    
    )
}


export default HeaderBase